<template>
  <van-sticky>
        <van-nav-bar
            title="我的优惠卷"
            left-text="返回"
            left-arrow
            placeholder
            @click-left="onBack"
            
        />
    </van-sticky>

    <van-tabs v-model:active="active" @click-tab="onClickTab">
      <van-tab title="全部"></van-tab>
      <van-tab title="可用"></van-tab>
      <van-tab title="不可用"></van-tab>
    </van-tabs>
    
    <div class="coupon_list">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            >
                    <div class="coupon_item" v-for="item in list" :key="item.id" :title="item.title">
                        <div class="item_content">
                            <router-link :to="{path:'/coupon/info',query:{cid:item.coupon.id}}">
                                <div class="left">{{ item.coupon.rate * 100 }}<span>折</span></div>
                                <div class="right">
                                    <div>{{ item.coupon.title }}</div>
                                    <div>订单满<span>100元</span>打<span>8折</span></div>
                                    <div>仅剩 {{ item.coupon.total }} 张</div>
                                    <div>领取后{{ item.coupon.endtime_date }}内有效</div>
                                </div>
                            </router-link>
                        </div>
                        <div class="receive">
                            <button class="right_btn" v-if="item.status == 1">可使用</button>
                            <button class="false_btn" v-else-if="item.status == 0">已失效</button>
                            
                        </div>
                    </div>
        
            </van-list>
        </van-pull-refresh>
    </div>
      
        <Tabbar />
      </template>
      
    <script setup> 
    const { proxy } = getCurrentInstance();
    const business = proxy.$business.value;

    const list = ref([]);
    const loading = ref(false);
    const finished = ref(false);
    const refreshing = ref(false);
    const page = ref(1);
    const active = ref(0);

    const onRefresh = () =>
    {
        list.value = [];
        page.value = 1;
        refreshing.value = true;
        finished.value = false;
        loading.value = true;

        setTimeout(onLoad,1500);
    }

    const onLoad = async () =>
    {
        if(refreshing.value === true)
        {
            refreshing.value = false;
        }

        let params = {
            page:page.value,
            busid:business.value.id,
            active:active.value
        }

        let result = await proxy.$http.post({
            url:'/coupon/businessCoupon',
            params
        })

        finished.value = false;
        loading.value = false;

        if(result.code === 1)
        {
            let count = result.data.count ?? 0;
            list.value = list.value.concat(result.data.list);

            if(list.value.length == count)
            {
                finished.value = true;

                return false;
            }

            page.value = page.value + 1;

        }else{
            finished.value = true;
            proxy.$warning(result.msg);
        }
    }

    const onClickTab = (value) =>
    {
      active.value = value.name;

      onRefresh();
    }


      const onBack = () => proxy.$router.back();
      </script>
      
      <style scoped>
        @import url('/assets/css/CouponIndex.css');
      </style>